/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2022-09-27 15:39:58
 * @Description:
 */
import Card from '@/components/Card';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/plots';
import { Button, Select } from 'antd';
import React from 'react';
import { useModel } from '@umijs/max';
import { memo, useEffect, useState } from 'react';
import { ChartSctionProps } from '../Section1';
import styles from './index.less';
const { Option } = Select

const RightContentRender: React.FC<ChartSctionProps & {
  typeChange: (value: string) => void
}> = (props) => {
  const { isModal, full, fullHandle, typeChange } = props
  const click = () => {
    if (isModal) {
      full && full(false)
    } else {
      fullHandle && fullHandle('section3')
      full && full(true)
    }
  }
  return <div className={styles.rightToolBar}>
    <Select placeholder="请选择" style={{ marginRight: 10 }} defaultValue={'1'} onChange={typeChange}>
      <Option value={'1'}>周</Option>
      <Option value={'2'}>月</Option>
      <Option value={'3'}>季度</Option>
      <Option value={'4'}>年</Option>
    </Select>
    <Button icon={isModal ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={click}></Button>
  </div>
}

const Index: React.FC<ChartSctionProps> = memo((props) => {
  const { currentDepartmentId } = useModel('organizational')
  const [config, setConfig] = useState<any>()
  const [type, setType] = useState('1')
  const typeMap = {
    '1': '周',
    '2': '月',
    '3': '季度',
    '4': '年',
  }

  const getData = () => {
    instance('/index/Screen/lastCycle', {
      params: {
        department_id: currentDepartmentId,
        type
      }
    }).then(data => {
      const config = {
        data: [{
          name: '本' + typeMap[type],
          type: typeMap[type],
          num: data.data.upper,
        },
        {
          name: '上' + typeMap[type],
          type: typeMap[type],
          num: data.data.lower,
        },],
        isGroup: true,
        xField: 'type',
        yField: 'num',
        seriesField: 'name',

        /** 设置颜色 */
        // color: ['#1ca9e6', '#f88c24'],
        legend: {
          flipPage: false,
          itemName: {
            style: {
              fill: '#ffffff',
            },
          },
          position: 'bottom',
          marker: {
            style: {
              lineWidth: 10,
              // stroke: 'red'
            }
          }
        },

        /** 设置间距 */
        // marginRatio: 0.1,
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle',
          // 'top', 'middle', 'bottom'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            {
              type: 'interval-adjust-position',
            }, // 数据标签防遮挡
            {
              type: 'interval-hide-overlap',
            }, // 数据标签文颜色自动调整
            {
              type: 'adjust-color',
            },
          ],
        },
      }
      setConfig(config)
    })
  }
  useEffect(() => {
    if (currentDepartmentId) {
      getData()
    }
  }, [currentDepartmentId, type]);

  const typeChange = (value: string) => {
    setType(value)
  }
  return (
    <div className={styles.section}>
      <Card TitleRnder="同比上周期学习人数" RightContentRender={<RightContentRender typeChange={typeChange} {...props} />}>
        {
          config && <Column height={301} {...config} />
        }
      </Card>
    </div>
  );
});

export default Index;
